<template>
  <div class="course-detail-page" v-loading="loading">
    <!-- 课程不存在或加载中 -->
    <el-empty v-if="!loading && !course.id" description="课程不存在">
      <el-button type="primary" round @click="$router.push('/courses')">返回课程列表</el-button>
    </el-empty>

    <!-- 课程详情内容 -->
    <template v-if="course.id">
      <!-- 顶部横幅 -->
      <div class="course-banner" :style="{ backgroundImage: `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${course.coverImage || '/images/course-placeholder.jpg'})` }">
        <div class="banner-content">
          <div class="difficulty-badge" :class="difficultyClass">{{ course.difficulty }}</div>
          <h1>{{ course.title }}</h1>
          <p v-if="course.subtitle">{{ course.subtitle }}</p>
          
          <div class="quick-stats">
            <div class="stat-item">
              <el-icon><School /></el-icon>
              <span>{{ course.institution }}</span>
            </div>
            <div class="stat-item">
              <el-icon><Collection /></el-icon>
              <span>{{ course.viewCount || 0 }} 次浏览</span>
            </div>
            <div class="stat-item">
              <el-icon><Star /></el-icon>
              <span>{{ favoriteCount }} 次收藏</span>
            </div>
            <div class="stat-item" v-if="avgRating > 0">
              <el-icon><StarFilled /></el-icon>
              <span>{{ avgRating.toFixed(1) }} 分 ({{ reviewCount }}条评价)</span>
            </div>
          </div>
          
          <div class="banner-actions">
            <el-button 
              type="primary" 
              size="large" 
              round
              @click="startLearning">
              <el-icon><Link /></el-icon> 开始学习
            </el-button>
            <el-button 
              :type="isFavorited ? 'danger' : ''" 
              size="large" 
              round
              @click="toggleFavorite"
              :loading="favoriteLoading">
              <el-icon v-if="isFavorited"><StarFilled /></el-icon>
              <el-icon v-else><Star /></el-icon>
              {{ isFavorited ? '取消收藏' : '收藏课程' }}
            </el-button>
          </div>
        </div>
      </div>

      <!-- 课程内容卡片 -->
      <div class="content-wrapper">
        <div class="course-content">
          <el-tabs>
            <el-tab-pane label="课程详情">
              <div class="info-section">
                <h2>课程信息</h2>
                <div class="info-grid">
                  <div class="info-item">
                    <span class="info-label">课程平台</span>
                    <span class="info-value">{{ course.platform }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">学科分类</span>
                    <span class="info-value">{{ course.subject }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">语言</span>
                    <span class="info-value">{{ course.language }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">开课时间</span>
                    <span class="info-value">{{ course.startDate ? formatDate(course.startDate) : '随时开课' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="info-label">课程时长</span>
                    <span class="info-value">{{ formatDuration(course.duration) }}</span>
                  </div>
                </div>
              </div>
              
              <div class="description-section">
                <h2>课程介绍</h2>
                <div v-if="course.description" class="course-description" v-html="formatDescription(course.description)"></div>
                <el-empty v-else description="暂无课程介绍" />
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="评价">
              <div class="reviews-section">
                <div class="reviews-header">
                  <h2>课程评价</h2>
                  <div v-if="avgRating > 0" class="rating-summary">
                    <div class="average-rating">
                      <span class="rating-number">{{ avgRating.toFixed(1) }}</span>
                      <div class="rating-stars">
                        <el-rate
                          v-model="avgRating"
                          disabled
                          show-score
                          text-color="#ff9900"
                        />
                      </div>
                    </div>
                    <div class="review-count">{{ reviewCount }} 条评价</div>
                  </div>
                </div>
                
                <div class="new-review" v-if="userStore.isLoggedIn">
                  <h3>发表评价</h3>
                  <div class="review-form">
                    <div class="rating-input">
                      <span class="label">评分：</span>
                      <el-rate v-model="newReview.rating" />
                    </div>
                    <el-input 
                      v-model="newReview.content" 
                      type="textarea" 
                      rows="4" 
                      placeholder="分享你对这门课程的看法..."
                    />
                    <div class="review-actions">
                      <el-button 
                        type="primary" 
                        round 
                        :disabled="!newReview.rating || !newReview.content"
                        :loading="submittingReview"
                        @click="submitReview"
                      >
                        提交评价
                      </el-button>
                    </div>
                  </div>
                </div>
                
                <div v-else class="login-to-review">
                  <p>登录后才能发表评价</p>
                  <el-button 
                    type="primary" 
                    round 
                    @click="$router.push({path: '/login', query: {redirect: $route.fullPath}})"
                  >
                    去登录
                  </el-button>
                </div>
                
                <div class="reviews-list">
                  <el-empty v-if="!reviews.length" description="暂无评价" />
                  
                  <div v-else class="review-items">
                    <div v-for="review in reviews" :key="review.id" class="review-item">
                      <div class="review-header">
                        <div class="reviewer-info">
                          <el-avatar :size="40" :src="null">{{ review.username?.charAt(0) }}</el-avatar>
                          <div class="reviewer-details">
                            <div class="reviewer-name">{{ review.username }}</div>
                            <div class="review-date">{{ formatDateTime(review.createdTime) }}</div>
                          </div>
                        </div>
                        <div class="review-rating">
                          <el-rate v-model="review.rating" disabled />
                        </div>
                      </div>
                      <div class="review-content">{{ review.content }}</div>
                    </div>
                  </div>
                  
                  <div class="reviews-pagination" v-if="reviewTotal > 0">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="reviewTotal"
                      :page-size="reviewPageSize"
                      :current-page="reviewCurrentPage"
                      @current-change="handleReviewPageChange"
                    />
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        
        <div class="course-sidebar">
          <div class="sidebar-card">
            <div class="card-header">
              <h3>课程链接</h3>
            </div>
            <div class="card-body">
              <el-button 
                type="primary" 
                icon="Link" 
                round 
                @click="startLearning" 
                class="full-width-btn"
              >
                前往学习平台
              </el-button>
              <div class="info-text">
                本站提供课程聚合推荐，点击按钮跳转至原课程平台学习
              </div>
            </div>
          </div>
          
          <div class="sidebar-card">
            <div class="card-header">
              <h3>相关推荐</h3>
            </div>
            <div class="card-body">
              <div v-if="similarCourses.length > 0" class="similar-courses">
                <div v-for="item in similarCourses" :key="item.id" class="similar-course-item">
                  <router-link :to="`/courses/${item.id}`" class="similar-course-link">
                    <div class="similar-course-image">
                      <img :src="formatCoverImage(item.coverImage)" alt="课程封面">
                      <div class="difficulty-tag" :class="getDifficultyClass(item.difficulty)">
                        {{ item.difficulty }}
                      </div>
                    </div>
                    <div class="similar-course-info">
                      <div class="similar-course-title">{{ item.title }}</div>
                      <div class="similar-course-meta">
                        <span>{{ item.institution }}</span>
                        <span>{{ formatShortDuration(item.duration) }}</span>
                      </div>
                    </div>
                  </router-link>
                </div>
              </div>
              <el-empty v-else description="加载中..." :image-size="60" />
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'
import { 
  School, 
  Calendar, 
  Clock, 
  Collection, 
  Star,
  StarFilled,
  Link 
} from '@element-plus/icons-vue'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const loading = ref(true)
const course = ref({id: null})
const isFavorited = ref(false)
const favoriteLoading = ref(false)
const favoriteCount = ref(0)
const similarCourses = ref([])

// 评价相关状态
const reviews = ref([])
const reviewTotal = ref(0)
const reviewCurrentPage = ref(1)
const reviewPageSize = ref(5)
const submittingReview = ref(false)
const avgRating = ref(0)
const reviewCount = ref(0)
const newReview = reactive({
  rating: 0,
  content: '',
  userId: null,
  courseId: null
})

// 根据难度返回不同的样式类
const difficultyClass = computed(() => {
  if (!course.value.difficulty) return ''
  
  switch (course.value.difficulty) {
    case '初级':
      return 'beginner'
    case '中级':
      return 'intermediate'
    case '高级':
      return 'advanced'
    default:
      return ''
  }
})

onMounted(async () => {
  const courseId = route.params.id
  if (!courseId) {
    ElMessage.error('课程ID不存在')
    router.push('/courses')
    return
  }
  
  // 获取课程详情
  await fetchCourseDetail(courseId)
  
  // 初始化评价表单
  if (userStore.isLoggedIn) {
    newReview.userId = userStore.userInfo.id
    newReview.courseId = Number(courseId)
    
    // 检查收藏状态
    await checkFavoriteStatus(courseId)
  }
  
  // 获取收藏数量
  await fetchFavoriteCount(courseId)
  
  // 获取评价列表
  fetchReviews()
  
  // 获取相似课程推荐
  fetchSimilarCourses(courseId)
})

// 监听路由变化，刷新数据
watch(() => route.params.id, (newId) => {
  if (newId) {
    // 重置数据
    course.value = {id: null}
    reviews.value = []
    similarCourses.value = []
    isFavorited.value = false
    favoriteCount.value = 0
    reviewTotal.value = 0
    reviewCurrentPage.value = 1
    avgRating.value = 0
    reviewCount.value = 0
    newReview.rating = 0
    newReview.content = ''
    
    // 获取新课程的数据
    fetchCourseDetail(newId)
    
    // 初始化评价表单
    if (userStore.isLoggedIn) {
      newReview.userId = userStore.userInfo.id
      newReview.courseId = Number(newId)
      
      // 检查收藏状态
      checkFavoriteStatus(newId)
    }
    
    // 获取收藏数量
    fetchFavoriteCount(newId)
    
    // 获取评价列表
    fetchReviews()
    
    // 获取相似课程推荐
    fetchSimilarCourses(newId)
  }
}, { immediate: false })

// 获取课程详情
const fetchCourseDetail = async (courseId) => {
  loading.value = true
  
  try {
    await request.get(`/course/${courseId}`, {}, {
      showDefaultMsg: false,
      onSuccess: (data) => {
        if (data) {
          course.value = data
          
          // 更新浏览量
          incrementViewCount(courseId)
        } else {
          // 处理空数据情况
          course.value = {id: null}
          ElMessage.warning('未找到课程信息')
        }
      },
      onError: (error) => {
        console.error('获取课程详情失败:', error)
        ElMessage.error('获取课程详情失败')
        course.value = {id: null} // 确保在错误情况下也有id属性
      }
    })
  } catch (error) {
    console.error('获取课程详情失败:', error)
    course.value = {id: null} // 确保在错误情况下也有id属性
  } finally {
    loading.value = false
  }
}

// 更新浏览量
const incrementViewCount = async (courseId) => {
  try {
    await request.post(`/course/${courseId}/view`, {}, {
      showDefaultMsg: false
    })
    
    // 添加浏览记录
    if (userStore.isLoggedIn) {
      addBrowseHistory(courseId)
    }
  } catch (error) {
    console.error('更新浏览量失败:', error)
  }
}

// 添加浏览记录
const addBrowseHistory = async (courseId) => {
  try {
    const data = {
      userId: userStore.userInfo.id,
      courseId: courseId
    }
    
    await request.post('/browse-history', data, {
      showDefaultMsg: false
    })
  } catch (error) {
    console.error('添加浏览记录失败:', error)
  }
}

// 检查收藏状态
const checkFavoriteStatus = async (courseId) => {
  try {
    const params = {
      userId: userStore.userInfo.id,
      courseId: courseId
    }
    
    await request.get('/favorite/check', params, {
      showDefaultMsg: false,
      onSuccess: (data) => {
        isFavorited.value = data
      }
    })
  } catch (error) {
    console.error('检查收藏状态失败:', error)
  }
}

// 获取收藏数量
const fetchFavoriteCount = async (courseId) => {
  try {
    await request.get('/favorite/count', { courseId }, {
      showDefaultMsg: false,
      onSuccess: (data) => {
        favoriteCount.value = data
      }
    })
  } catch (error) {
    console.error('获取收藏数量失败:', error)
  }
}

// 切换收藏状态
const toggleFavorite = async () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再收藏课程')
    router.push({
      path: '/login',
      query: { redirect: route.fullPath }
    })
    return
  }
  
  favoriteLoading.value = true
  
  try {
    if (isFavorited.value) {
      // 取消收藏
      await request.delete('/favorite?userId=' + userStore.userInfo.id + '&courseId=' + course.value.id, {
        successMsg: '已取消收藏',
        onSuccess: () => {
          isFavorited.value = false
          favoriteCount.value--
        }
      })
    } else {
      // 添加收藏
      const data = {
        userId: userStore.userInfo.id,
        courseId: course.value.id
      }
      
      await request.post('/favorite', data, {
        successMsg: '收藏成功',
        onSuccess: () => {
          isFavorited.value = true
          favoriteCount.value++
        }
      })
    }
  } catch (error) {
    console.error('操作收藏失败:', error)
  } finally {
    favoriteLoading.value = false
  }
}

// 开始学习课程
const startLearning = () => {
  if (course.value.courseUrl) {
    window.open(course.value.courseUrl, '_blank')
  } else {
    ElMessage.warning('课程链接不可用')
  }
}

// 获取评价列表
const fetchReviews = async () => {
  if (!course.value.id) {
    // 如果课程ID不存在，不进行请求
    reviews.value = []
    reviewTotal.value = 0
    reviewCount.value = 0
    avgRating.value = 0
    return
  }
  
  try {
    const params = {
      pageNum: reviewCurrentPage.value,
      pageSize: reviewPageSize.value
    }
    
    await request.get(`/review/course/${course.value.id}`, params, {
      showDefaultMsg: false,
      onSuccess: (data) => {
        reviews.value = data.records||[]
        reviewTotal.value = data.total||0
        reviewCount.value = data.total||0
        
        // 计算平均评分
        if (data.records && data.records.length > 0) {
          const totalRating = data.records.reduce((sum, review) => sum + review.rating, 0)
          avgRating.value = totalRating / data.records.length
        }
      }
    })
  } catch (error) {
    console.error('获取评价列表失败:', error)
  }
}

// 处理评价分页变化
const handleReviewPageChange = (page) => {
  reviewCurrentPage.value = page
  fetchReviews()
}

// 提交评价
const submitReview = async () => {
  if (!newReview.rating || !newReview.content) {
    ElMessage.warning('请填写评分和评价内容')
    return
  }
  
  submittingReview.value = true
  
  try {
    await request.post('/review', newReview, {
      successMsg: '评价提交成功',
      onSuccess: () => {
        // 重置表单
        newReview.rating = 0
        newReview.content = ''
        
        // 刷新评价列表
        reviewCurrentPage.value = 1
        fetchReviews()
      }
    })
  } catch (error) {
    console.error('提交评价失败:', error)
  } finally {
    submittingReview.value = false
  }
}

// 获取相似课程推荐
const fetchSimilarCourses = async (courseId) => {
  try {
    await request.get(`/recommendation/similar/${courseId}`, { limit: 5 }, {
      showDefaultMsg: false,
      onSuccess: (data) => {
        similarCourses.value = data || []
      }
    })
  } catch (error) {
    console.error('获取相似课程推荐失败:', error)
  }
}

// 格式化课程封面图片
const formatCoverImage = (image) => {
  if (!image) {
    return '/images/course-placeholder.jpg'
  }
  
  // 如果已经是完整URL
  if (image.startsWith('http://') || image.startsWith('https://')) {
    return image
  }
  
  // 添加API前缀
  const API_BASE_URL = process.env.VUE_APP_BASE_API || '/api'
  
  if (image.startsWith(API_BASE_URL)) {
    return image
  }
  
  return `${API_BASE_URL}${image.startsWith('/') ? '' : '/'}${image}`
}

// 获取难度样式类
const getDifficultyClass = (difficulty) => {
  if (!difficulty) return ''
  
  switch (difficulty) {
    case '初级':
      return 'beginner'
    case '中级':
      return 'intermediate'
    case '高级':
      return 'advanced'
    default:
      return ''
  }
}

// 简化的课程时长格式化（用于推荐列表）
const formatShortDuration = (minutes) => {
  if (!minutes) return ''
  
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  
  if (hours > 0) {
    return `${hours}h${mins > 0 ? `${mins}m` : ''}`
  }
  
  return `${mins}m`
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '未知'
  
  const date = new Date(dateStr)
  return date.toLocaleDateString()
}

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '未知'
  
  const date = new Date(dateTimeStr)
  return `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
}

// 格式化课程时长
const formatDuration = (minutes) => {
  if (!minutes) return '未知时长'
  
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  
  if (hours > 0) {
    return `${hours}小时${mins > 0 ? ` ${mins}分钟` : ''}`
  }
  
  return `${mins}分钟`
}

// 格式化课程描述（将换行符转换为HTML段落标签）
const formatDescription = (description) => {
  if (!description) return ''
  
  return description
    .split('\n\n')
    .map(paragraph => `<p>${paragraph.replace(/\n/g, '<br>')}</p>`)
    .join('')
}
</script>

<style lang="scss" scoped>
.course-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.course-banner {
  height: 400px;
  background-size: cover;
  background-position: center;
  color: white;
  position: relative;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  
  .banner-content {
    height: 100%;
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    h1 {
      font-size: 2.5rem;
      margin: 0 0 10px;
      font-weight: 700;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    }
    
    p {
      font-size: 1.2rem;
      margin: 0 0 20px;
      max-width: 80%;
      opacity: 0.9;
    }
    
    .difficulty-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 6px 16px;
      border-radius: 30px;
      font-weight: 600;
      font-size: 14px;
      
      &.beginner {
        background: linear-gradient(135deg, #67c23a, #85ce61);
      }
      
      &.intermediate {
        background: linear-gradient(135deg, #e6a23c, #f3d19e);
      }
      
      &.advanced {
        background: linear-gradient(135deg, #f56c6c, #f89898);
      }
    }
  }
  
  .quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 15px;
      
      .el-icon {
        font-size: 18px;
      }
    }
  }
  
  .banner-actions {
    display: flex;
    gap: 15px;
    
    .el-button {
      min-width: 140px;
    }
  }
}

.content-wrapper {
  display: flex;
  gap: 30px;
  margin-top: 30px;
  
  .course-content {
    flex: 1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 25px;
    
    h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--el-color-primary);
      margin-top: 0;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    h3 {
      font-size: 1.2rem;
      font-weight: 600;
      margin-top: 0;
      margin-bottom: 15px;
    }
  }
  
  .course-sidebar {
    width: 300px;
    
    .sidebar-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      overflow: hidden;
      margin-bottom: 20px;
      
      .card-header {
        padding: 15px 20px;
        background: #f5f7fa;
        border-bottom: 1px solid #e8e8e8;
        
        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
        }
      }
      
      .card-body {
  padding: 20px;
      }
      
      .full-width-btn {
        width: 100%;
        margin-bottom: 15px;
      }
      
      .info-text {
        font-size: 13px;
        color: #606266;
        line-height: 1.5;
      }
      
      .placeholder-text {
        color: #909399;
        font-style: italic;
        text-align: center;
        margin: 20px 0;
      }
    }
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
  
  .info-item {
    display: flex;
    flex-direction: column;
    
    .info-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 5px;
    }
    
    .info-value {
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.course-description {
  line-height: 1.8;
  
  :deep(p) {
    margin-bottom: 15px;
  }
}

/* 评价相关样式 */
.reviews-section {
  .reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
    
    .rating-summary {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .average-rating {
        display: flex;
        align-items: center;
        gap: 10px;
        
        .rating-number {
          font-size: 2rem;
          font-weight: 700;
          color: #ff9900;
        }
      }
      
      .review-count {
        color: #606266;
        font-size: 14px;
      }
    }
  }
  
  .new-review {
    background: #f5f7fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    
    .review-form {
      .rating-input {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        
        .label {
          margin-right: 10px;
          white-space: nowrap;
        }
      }
      
      .review-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
      }
    }
  }
  
  .login-to-review {
    background: #f5f7fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .reviews-list {
    .review-items {
      .review-item {
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
        
        .review-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          
          .reviewer-info {
            display: flex;
            gap: 15px;
            align-items: center;
            
            .reviewer-details {
              .reviewer-name {
                font-weight: 600;
                margin-bottom: 5px;
              }
              
              .review-date {
                font-size: 12px;
                color: #909399;
              }
            }
          }
        }
        
        .review-content {
          line-height: 1.6;
          color: #303133;
        }
        
        &:last-child {
          border-bottom: none;
        }
      }
    }
    
    .reviews-pagination {
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
  }
}

.similar-courses {
  display: flex;
  flex-direction: column;
  gap: 15px;
  
  .similar-course-item {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    
    .similar-course-link {
      display: flex;
      gap: 12px;
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
      
      &:hover {
        opacity: 0.85;
        
        .similar-course-title {
          color: var(--el-color-primary);
        }
      }
    }
    
    .similar-course-image {
      width: 100px;
      height: 56px;
      position: relative;
      flex-shrink: 0;
      border-radius: 4px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .difficulty-tag {
        position: absolute;
        top: 4px;
        right: 4px;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        color: white;
        background-color: rgba(0, 0, 0, 0.6);
        
        &.beginner {
          background-color: rgba(103, 194, 58, 0.85);
        }
        
        &.intermediate {
          background-color: rgba(230, 162, 60, 0.85);
        }
        
        &.advanced {
          background-color: rgba(245, 108, 108, 0.85);
        }
      }
    }
    
    .similar-course-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .similar-course-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition: color 0.2s ease;
      }
      
      .similar-course-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #909399;
        
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

@media (max-width: 992px) {
  .content-wrapper {
    flex-direction: column;
    
    .course-sidebar {
      width: 100%;
    }
  }
  
  .course-banner {
    height: auto;
    padding: 30px 0;
    
    .banner-content {
      h1 {
        font-size: 2rem;
      }
    }
  }

  .similar-courses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    
    .similar-course-item {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
}

@media (max-width: 768px) {
  .course-banner {
    .banner-content {
      h1 {
        font-size: 1.5rem;
      }
      
      p {
        max-width: 100%;
      }
    }
    
    .banner-actions {
      flex-direction: column;
    }
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .reviews-section {
    .reviews-header {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}
</style> 